<template>
  <section>
    <div class="content-top">
      <div class="content-title">{{ title }}</div>
      <div class="content-add" @click="handleAdd">新增页面</div>
    </div>
    <div class="program" v-if="descks.length > 0">
      <div class="program-menu">
        <div v-for="(x, y) in descks" :key="y" :class="y == idx ? 'active' : ''" @click="select(y)">
          {{ x.title }}
        </div>
      </div>
      <div class="program-list">
        <div v-for="(a, b) in descks[idx].children" :key="b" @click="goPath(a)">
          <div :class="'iconfont icon-' + a.icon" :style="{ backgroundColor: a.bg }"></div>
          <div class="word">{{ a.title }}</div>
        </div>
      </div>
    </div>
    <el-dialog title="选择图标" v-model="showSelectIcon" width="800px">
      <div class="icons-list">
        <div v-for="(x, y) in glyphs" @click="selectIcon(y)" :key="y" :class="selectIdx == y ? 'active' : ''">
          <div :class="'iconfont icon-' + x.font_class"></div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer" style="display: flex;justify-content: right;">
        <el-button type="primary" @click="saveSelect">保 存</el-button>
        <el-button @click="() => { showSelectIcon = false }">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog :title="state.title" v-model="state.open" width="800px">
      <el-form ref="formRef" :model="form" size="default" label-width="150px">
        <el-form-item v-for="(x, y) in columns" :key="y" :label="x.title" :prop="x.name">
          <template v-if="x.name == 'color'">
            <el-input v-model="form.color" :placeholder="'请输入' + x.title" style="width: 150px;margin-right: 10px;" />
            <input type="color" v-model="form.color" />
          </template>
          <template v-else-if="x.name == 'icon'">
            <div style="margin-right: 10px;" :class="'iconfont icon-' + form.icon"></div>
            <el-input v-model="form.icon" :placeholder="'请输入' + x.title" style="width: 180px;margin-right: 10px;" />
            <el-button @click="() => { showSelectIcon = true }">选择图标</el-button>
          </template>
          <el-input v-else v-model="form[x.name]" :placeholder="'请输入' + x.title" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="display: flex;justify-content: right;">
        <div>
          <el-button type="primary" @click="handleLast">上一个</el-button>
          <el-button type="primary" @click="submit">保 存</el-button>
          <el-button @click="() => { state.open = false }">取 消</el-button>
        </div>
      </div>
    </el-dialog>
  </section>
</template>
<script setup>
import { onMounted, ref, reactive, getCurrentInstance } from 'vue'
import { glyphs } from '@/assets/font/iconfont.json'
import { useRouter } from 'vue-router'
import codes from '@/utils/codes';
import options from '@/utils/options';
const { proxy } = getCurrentInstance()
const props = defineProps({
  title: {
    type: String,
    defalut: ''
  }
})
const router = useRouter()
const idx = ref(0)
const arr = ref([])
const descks = ref([])
function goPath(x) {
  router.push({
    path: '/' + x.router
  })
}
const columns = ref([])
const form = ref({})
const formType = ref({})
const showSelectIcon = ref(false)
const selectIdx = ref(0)
const state = reactive({
  title: '',
  open: false
})
onMounted(() => {
  getDescks()
  getColumns()
})
// 获取程序
const getDescks = () => {
  const arr = options.descks
  const list = []
  proxy.$service.queryData({
    table: 'descks',
    data: {
      visible: 1
    },
    query: {
      page: 1,
      show: 100
    }
  }).then(res => {
    arr.forEach((x, y) => {
      // console.log(res)
      list.push({
        title: x,
        children: proxy.$global.reSort(res.data.filter(x => x.type == y + 1), 'sort')
      })
    })
    descks.value = list
  })
}
const select = (y) => {
  idx.value = y
  if (y == 0) {
    arr.value = descks.value
  } else {
    arr.value = descks.value.filter(x => x.type == y - 1)
  }
}

function selectIcon(y) {
  selectIdx.value = y
}
function saveSelect() {
  let obj = form.value
  obj.icon = glyphs[selectIdx.value].font_class
  form.value = obj
  showSelectIcon.value = false
}

function getColumns() {
  proxy.$service.getColumnList('descks').then(res => {
    columns.value = res.data
  })
}

function handleLast() {
  let arr = descks.value[idx.value].children
  let row = arr[arr.length - 1]
  delete row.id
  form.value = row
}

function testCom(name) {
  const newHomeCom = codes.filter(x=> x.label == '桌面组件')[0].code
  let content = newHomeCom.replace(/demo/g, name)
  const path = __dirname.split('node')[0] + `src/renderer/src/views/${name}`
  proxy.$system.exist(path).then(() => {
    addFile()
  }).catch(() => {
    proxy.$system.addDir(path).then(() => {
      addFile()
    })
  })
  function addFile() {
    proxy.$system.writeFile(path + '/index.vue', content).then(res => {
      // console.log(res)
    })
  }
}

function handleAdd() {
  form.value = {}
  state.open = true
  state.title = '新增'
  formType.value = 1
}

function proxyToObject(proxy) {
  const obj = {};
  for (let prop in proxy) {
    if (Reflect.has(proxy, prop)) { // 使用Reflect.has检查属性是否存在，避免不必要的错误
      obj[prop] = Reflect.get(proxy, prop);
    }
  }
  return obj;
}

function submit() {
  let table = 'descks'
  let data = proxyToObject(form.value)
  data.update_time = proxy.$global.formatDataTime(new Date())
  data.create_time = proxy.$global.formatDataTime(new Date())
  testCom(data.router)
  proxy.$service.addData({ table, data }).then(res => {
    if (res.code == 1000) {
      proxy.$global.success(res.msg)
      testCom(data.router)
      getDescks()
      state.open = false
    }
  })
}
</script>
<style scoped lang="scss">
.program {
  width: 100%;

  .program-menu {
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: space-around;
    border-bottom: 1px solid #fff;

    >div {
      width: 120px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      cursor: pointer;
    }

    .active {
      color: #1889fa;
    }
  }

  .program-list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding-top: 10px;

    >div {
      width: 25%;
      height: 80px;
      text-align: center;
      cursor: pointer;

      >div:nth-child(1) {
        font-size: 24px;
      }
    }
  }
}


.icons-list {
  display: flex;
  flex-wrap: wrap;

  >div {
    width: 36px;
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #fff;

    >div {
      font-size: 20px;
    }
  }

  .active {
    border: 1px solid darkblue;
  }
}
</style>
